<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="CSS/blog_detail.css">
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="editor.md/editor.md-master/css/editormd.min.css" />

</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="Imag/导航栏头像.png">
        <!-- span 标签不独占一行, 是一个小盒子 -->
        <span class="title"> 我的博客系统 </span>
        <div class="spacer"></div>
        <!-- # 在a标签中表示占位符 -->
        <a href="blog_list.html">主页</a>
        <a href="square.html">灌水区</a>
        <a href="blog_editor.html">写博客</a>
        <a href="login.html" id="exit">注销</a>
        <a href="blog_list.html" id="deleteButton">删除</a>
    </div>

    <div class="container">

        <!-- 左侧信息, 先表示出左侧大盒子-->
        <div class="container-left">
            <div class="user">
                <img src="Imag/用户名头像.png" alt="这是一个用户名头像">
                <!-- 用户名 -->
                <h3></h3>
                <a href="https://gitee.com/dashboard">Gitee 地址</a>
                <div class="counter">
                    <!-- <p>文章</p>
                    <p>分类</p> -->
                    <a href="blog_list.html" >文章</a>
                    <a href="#">分类</a>
                </div>
                <div class="counter">
                    <span id="count"></span>
                    <span id="sort">?</span>
                </div>
            </div>
        </div>

        <div class="container-right">

            <!-- 表示一篇博客页面 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title" style="font-size: 24px; color: black;"></div>
                <!-- 发布时间 -->
                <div class="date"></div>
                <!-- 博客正文-->
                <!-- <div class="article"></div> -->
                <!-- 为了配合 editor.md 进行样式转换, 必须把 类选择器改成 id 选择器 -->
                <div id="article" style="background-color: rgba(255, 255, 255, 0.1); font-size: 18px; color: black;"></div>
                
            </div>

        </div>

    </div>

    <script src="js/jQuery.min.js"></script>
    <!-- 要保证一下得 js 要在 jQuery 之后加载 。 因为 editor.md 依赖 jquery -->
    <script src="editor.md/editor.md-master/lib/marked.min.js"></script>
    <script src="editor.md/editor.md-master/lib/prettify.min.js"></script>
    <script src="editor.md/editor.md-master/editormd.js"></script>

    <script>

        let exit = document.querySelector('#exit');
                exit.onclick = function() {
                    $.ajax({
                        type:'get',
                        url:'exit',
                        contentType:'application/json; charset = utf8',
                        success:function(body) {
                            if(body.issuccess == true) {
                                alert('注销成功!');
                                location.assign('login.html');
                            } else {
                                alert('当前未登录, 无法执行该操作!');
                                return;
                            }
                        }
                    });
                }

        $.ajax({
            type: 'get',
            url:'detail' + location.search,
            success: function(body) {
                console.log(body);
                // 处理响应结果. 此处的 body 就是表示一个博客的 js 对象
                // 由于是跳转到详情页, 只需要更新详情页中的前端内容
                // 1. 更新标题
                let titleDiv = document.querySelector('.container-right .title');
                titleDiv.innerHTML = body.title;
                // 2. 更新发布时间
                let dateDiv = document.querySelector('.date');
                dateDiv.innerHTML = body.postTime;
                // 3, 更新正文
                // 数据中保存的 content 内容是 Markdown 渲染前的内容
                // 最终显示给用户看的是 Markdown 渲染后的
                // 使用 editormd 对 Markdown 内容进行转换
                
                // 把后面的内容 markdown 格式的字符串转成 HTML 输出到 #article 这个标签中
                editormd.markdownToHTML('article', { markdown: body.content});
            }
        });

        // 强制登录检测
        function forceLogin() {
            $.ajax({
                type: 'get',
                url: 'force',
                success: function(body) {
                    if(body.userId && body.userId > 0) {
                        // 登录成功
                        console.log("登录成功");
                        console.log(body.userId);
                    } else {
                        // 未登录强制跳转
                        location.assign('login.html');
                    }
                }
            });
        }

        forceLogin();

        function getDetailSheet() {
            $.ajax({
                type:'get',
                url:'detailSheet',
                success: function(body) {
                    // 更新作者
                    let h3 = document.querySelector('.container-left .user h3');
                    h3.innerHTML = body.name;
                    console.log(body.name);
                    console.log("更新详情页作者");
                }
            });
        }

        getDetailSheet();

        function countBlog() {
            $.ajax({
                type:'get',
                url:'count',
                contentType:'application/json; charset = utf8',
                // 后端传来的是一个 json格式的 user对象
                success: function(body) {
                    let count = document.querySelector('#count');
                    count.innerHTML = body;
                    console.log('body');
                }    
            });
        }
        countBlog();

        let deleteButton = document.querySelector('#deleteButton');
        deleteButton.onclick = function() {
            $.ajax({
                type:'get',
                url:'delete_blog' + location.search,
                contentType:'application/json; charset = utf8',
                success:function(body) {
                    if(body.issuccess == true) {
                        alert("删除成功!")
                        location.assign('blog_list.html');
                        return;
                    } else {
                        alert('当前暂无此权限!');
                        return;
                    }
                }
            });
        }


        

    </script>
</body>
</html>